<template>
  <div
    style="margin-top: 15px;min-height: 100%;"
    class="main-div"
  >
    <Spin v-show="isSpinShow" fix size="large" />

    <Card>
      <div slot="title">

        <span>

          <Button
            type="primary"
            style="margin-bottom: 2px;margin-right: 15px;"
            @click="action('startFlow')"
          >发起
          </Button>
          <Button
            type="primary"
            style="margin-bottom: 2px;margin-right: 15px;"
            @click="action('saveDraft')"
          >保存
          </Button>
          <Button
            type="primary"
            style="margin-bottom: 2px;margin-right: 15px;"
            @click="action('print')"
          >打印
          </Button>
          <Button type="primary" style="margin-bottom: 2px;margin-right: 15px;" @click="action('flowImage')">流程图
          </Button>
          <Button type="primary" style="margin-bottom: 2px;margin-right: 15px;" @click="go">
            <Icon type="md-close" />关闭
          </Button>
        </span>
      </div>
      <Card>
        <div v-if="jsonData.config!=null" class="container">

          <fm-generate-form
            ref="generateForm"
            :data="jsonData"
            :remote="remoteFuncs"
            :value="editData"
            :remote-option="dynamicData"
          />

        </div>

      </Card>

    </Card>
    <Modal
      :mask-closable="false"
      v-model="flowImage.show"
      title="流程图"
      width="85%"
      :transfer="false"
    >
      <iframe
        id="flowImageframe"
        width="100%"
        style="min-height: 600px"
        height="100%"
        frameborder="0"
        align="center"
        allowfullscreen="true"
        allow="autoplay"
        :src="flowImage.src"
      />
      <div slot="footer" />
    </Modal>
  </div>

</template>

<script>
import { loadWfModule, getStartBtn, renderStartForm, startDef, saveDraft } from '@/api/loadwfmodule'
import Footer from '../../../common/footer'

export default {
  name: 'Task',
  components: {
    Footer
  },

  data() {
    return {
      tableData: [],
      jsonData: {},
      editData: {},
      remoteFuncs: {},
      singleUserData: {},
      dynamicData: {},
      sysTypeEntity: {},
      isSpinShow: true,
      taskBtns: [],
      modelKey: '',
      tableHeight: 450,
      startForm: {
        defId: '',
        modelId: 0,
        typeTitle: '',
        formData: '',
        groupId: '',
        typeKey: '',
        draftId: ''
      },
      flowImage:
          {
            show: false,
            src: '',
            base: process.env.VUE_APP_BASE_BPM_API + '/view/def.html?fireHoverAction=true&modelId='
          }

    }
  },
  mount() {
    this.$nextTick(function() {
      // 获取传递的参数
      this.modelKey = this.$route.params.modelKey
      this.getData()
    })

    this.getData()
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },
  created: function() {
    // 获取传递的参数
    this.modelKey = this.$route.params.modelKey
    this.startForm.draftId = this.$route.params.draftId
    this.editData = JSON.parse(this.$route.params.formData)
    this.getData()
  },
  methods: {
    action: function(action) {
      if (typeof action === 'object') {
        this.alias = action.alias
      } else {
        this.alias = action
      }

      switch (this.alias) {
        case 'startFlow':// 启动
          this.startFlow()
          break
        case 'flowImage':
          this.flowImageAction()
          break
        case 'print':
          window.print()
          break
        case 'saveDraft':
          this.saveDraft()
          break
        default:
      }
    },
    flowImageAction: function() {
      this.flowImage.src = this.flowImage.base + this.startForm.modelId + '&t=' + new Date().getTime()
      this.flowImage.show = true
    },
    startFlow: function() {
      this.getFormData()
      const that = this
      setTimeout(function() {
        startDef(that.startForm).then((response) => {
          if (response.code == 0) {
            that.$message({message:'发起成功',type:'success',customClass:'zZindex'});

            that.go()
          }
        })
      }, 300)
    },

    async  saveDraft() {
      var formData = {}
      const get = () => {
        return new Promise(resolve => {
          formData = this.getFormData()
          resolve(formData)
        })
      }

      await get()
      const that = this
      var obj = JSON.parse(JSON.stringify(this.startForm))
      obj['formDataStr'] = obj['formData']
      obj['id'] = obj['draftId']
      delete (obj['formData'])

      saveDraft(obj).then((response) => {
        if (response.code == 0) {
          that.$message({"duration":'800',message:'保存成功',type:'success',customClass:'zZindex'});

          that.go()
        }
      })
    },
    getFormData: function() {
      this.$refs.generateForm.getData().then(data => {
        this.startForm.formData = JSON.stringify(data)
        return data
      }).catch(e => {
      })
    },
    go: function() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    start: function(item) {
      this.$router.push({ name: 'handleHisTaskDetails', query: { t: new Date().getTime() }})
    },
    getData: function() {
      getStartBtn(this.modelKey).then((response) => {
        this.taskBtns = response.data
        this.startForm.defId = response.defId
        this.startForm.modelId = response.modelId
        if(response.sysTypeEntity){
          this.startForm.typeTitle = response.sysTypeEntity.title
          this.startForm.groupId = response.sysTypeEntity.id
          this.startForm.typeKey = response.sysTypeEntity.typeKey
        }

        renderStartForm(this.startForm.defId).then((response) => {
          if (response.code == 0) {
            this.jsonData = JSON.parse(response.data)
            if (response.editData) {
              this.editData = JSON.parse(response.editData)
            }
          } else {
            this.go()
          }
        })

        this.isSpinShow = false
      })
    }

  }

}

</script>
<style lang="scss">
  .task-card {
    margin-top: 10px;
  }

  .item {
    display: block;
    width: 311px;
    float: left;
    margin-left: 20px;
    box-shadow: 0 0 20px 0 rgba(204, 207, 227, .45);
    margin-bottom: 10px;

  }

  .left{
    font-size: 16px;
    color: #575757;
  }

  img {
    width: 60px;
    height: 60px;
  }
  .container {
    height: auto !important;
    min-height: 1650px;
  }
</style>
